<template>
  <view class="page-rechargelog">
    <view class="header">
      <view class="title">{{ $t('mine.充值记录') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <view class="param">
      <view class="param-item" @click="handleChooseType">
        <view class="txt">{{ typeLable }}</view>
        <uni-icons type="down" color="#fff" size="10"></uni-icons>
      </view>
      <view class="param-item" @click="handleChooseDate">
        <view class="txt">{{ showDate }}</view>
        <uni-icons type="down" color="#fff" size="10"></uni-icons>
      </view>
    </view>
    <view class="content">
      <view class="records-item" v-for="(v, i) of recordsList" :key="i">
        <view class="item-info">
          <view class="label">{{ $t('mine.充值时间') }}：</view>
          <view class="value">{{ v.createdDate }}</view>
        </view>
        <view class="item-info">
          <view class="label">{{ $t('mine.订单编号') }}：</view>
          <view class="value"> {{ v.tradeNo }}<image v-if="v.tradeNo" @click="handleCopy(v.tradeNo)" src="~@/static/images/mine/copy.png" mode="aspectFill" class="copy-icon" /></view>
        </view>
        <view class="item-info">
          <view class="label">{{ $t('mine.充值金额') }}：</view>
          <view class="value" style="color: #d3955c">{{ v.orginMoney }}($)</view>
        </view>
      </view>
      <uni-load-more :status="more" :contentText="{ contentdown: $t('common.上拉显示更多'), contentrefresh: $t('common.正在加载'), contentnomore: $t('common.没有更多数据了') }" @clickLoadMore="loadMore"></uni-load-more>
    </view>
    <!-- 选择类型 -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup-wrapper">
        <view class="popup-header">
          <view class="header-item header-cancel" @click="handleCancel">{{ $t('common.取消') }}</view>
          <view class="header-item header-confirm" @click="handleConfirm">{{ $t('common.完成') }}</view>
        </view>
        <view class="popup-content">
          <picker-view :value="pickerValue" @change="bindPickerChange" class="picker-view">
            <picker-view-column>
              <view class="popup-item" v-for="item in orderList" :key="item.id">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uni-popup>
    <!-- 选择日期 -->
    <uni-popup ref="picker" type="bottom">
      <date-picker @confirm="onConfirm" @cancel="onCancel"></date-picker>
    </uni-popup>
  </view>
</template>
<script>
  import { rechargeLog } from '@/api/wallet.js'
  import DatePicker from '@/components/DatePicker.vue'

  export default {
    components: {
      DatePicker
    },
    data() {
      return {
        type: 0,
        date: '',
        showDate: '',
        orderList: [
          {
            name: this.$t('order.充值中'),
            id: 0
          },
          {
            name: this.$t('order.已到帐'),
            id: 1
          }
          // {
          //   name: this.$t('order.充值失败'),
          //   id: 2
          // }
        ],
        more: 'more',
        page: 1,
        limit: 30,
        recordsList: [],
        pickerValue: [0]
      }
    },
    onPullDownRefresh() {
      this.recordsList = []
      this.page = 1
      this.more = 'more'
      this.setDate()
      uni.stopPullDownRefresh()
    },
    computed: {
      typeLable() {
        return this.orderList.find((item) => item.id === this.type)?.name
      }
    },
    methods: {
      //复制
      handleCopy(txt) {
        uni.setClipboardData({
          data: txt,
          success: () => {
            this.$modal.msgSuccess(this.$t('mine.复制成功'))
          }
        })
      },
      // 返回上一页
      handleBack() {
        // uni.navigateBack()
        this.$tab.navigateTo('/pages/mine/wallet/index')
      },
      // 选择日期
      setDate() {
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`
        this.date = `${year}${month}`
        this.showDate = `${year}-${month}`
        this.getList()
      },
      // 选择类型
      handleChooseType() {
        let index = this.orderList.findIndex((item) => item.id === this.type)
        this.pickerValue = [index]
        this.$refs.popup.open('bottom')
      },
      bindPickerChange(e) {
        this.pickerValue = e.detail.value
      },
      handleConfirm() {
        this.type = this.orderList[this.pickerValue[0]].id
        this.$refs.popup.close()
        this.recordsList = []
        this.page = 1
        this.getList()
      },
      handleCancel() {
        this.$refs.popup.close()
      },
      // 选择日期
      handleChooseDate() {
        this.$refs.picker.open('bottom')
      },
      onConfirm(e) {
        let { year, month } = e
        month = month > 10 ? month : `0${month}`
        this.date = `${year}${month}`
        this.showDate = `${year}-${month}`
        this.$refs.picker.close()
        this.recordsList = []
        this.page = 1
        this.getList()
      },
      onCancel() {
        this.$refs.picker.close()
      },
      loadMore(e) {
        if (this.more == 'noMore') return
        this.more = 'loading'
        this.page++
        this.getList()
      },
      //拉取数据
      getList() {
        this.$modal.loading('loading', 'loading')
        rechargeLog({
          status: this.type,
          md: this.date,
          page: this.page,
          limit: this.limit
        })
          .then((res) => {
            let { page } = res.result
            let { total, records } = page
            this.recordsList.push(...records)
            if (total == this.recordsList.length) {
              this.more = 'noMore'
            } else {
              this.more = 'more'
            }
            this.$modal.closeLoading()
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      }
    },
    created() {
      this.setDate()
    },
    filters: {
      filterPrivacy(val) {
        return val ? val.replace(/(.{0}).*(.{4})/, '$1****$2') : ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .page-rechargelog {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .param {
      position: fixed;
      top: 50px;
      left: 20rpx;
      right: 20rpx;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      background: #31b2b5;
      border-radius: 6px;
      z-index: 9;
      .param-item {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 26rpx;
      }
    }
    .content {
      margin: 110px 20px 20px;
      .records-item {
        position: relative;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 2px;
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        .item-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          & + .item-info {
            margin-top: 10px;
          }
          .value {
            margin-left: 10rpx;
            display: flex;
            align-items: center;
            .item-btn {
              height: 28px;
              line-height: 28px;
              border-radius: 10px;
              text-align: center;
              color: #fff;
              margin-left: 40rpx;
              padding: 0 20rpx;
              &.is-0 {
                background-color: #fecf77;
              }
              &.is-1 {
                background-color: #31b3b5;
              }
              &.is-2 {
                background-color: #aaaaaa;
              }
              &.is--1 {
                background-color: #ec4b41;
              }
            }
            .copy-icon {
              width: 20rpx;
              height: 20rpx;
              padding-left: 6rpx;
            }
          }
        }
      }
    }
    .popup-wrapper {
      background-color: #fff;
      border-radius: 16px 16px 0 0;
      .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #eee;
        .header-item {
          font-size: 12px;
          background-color: transparent;
          border: none;
          padding: 5px 10px;
          border-radius: 8px;
        }
        .header-confirm {
          color: #31b2b5;
          font-weight: 500;
        }
      }
      .popup-content {
        /* 选择器中间选中条样式 */
        ::v-deep .uni-picker-view-indicator {
          height: 40px;
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }
        .picker-view {
          height: 240px;
        }
        .popup-item {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>
